<template>
  <div>
    <div class="tit">
      <span class="titleESB">铂诺智能云策略平台</span>
    </div>
    
    <div class="emphasis">
      <div class="info">
        <h3>重点行业</h3>
        <div id="dataoption" ref="dataoption"></div>
      </div>
      

    </div>
    <div class="particulars">
      <h3>行业详情</h3>
      <el-table
      :row-style="tableRowStyle"
      :header-cell-style="{background:'#141E31',color:'#000000'}"
        :data="tableData1"
        style="width: 100%">
        <el-table-column
          prop="date"
          align="center"
          label="重点行业">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="公司数量"
          sortable          
          width="100%">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="流通市值(亿)"
          sortable
          width="120%">
        </el-table-column>
        <el-table-column
          prop="new2"
          align="center"
          label="周线底部"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new3"
          align="center"
          label="周线向上"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new4"
          align="center"
          label="周线顶部"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new5"
          align="center"
          label="周线向下"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new6"
          align="center"
          label="基本面"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new7"
          align="center"
          label="市赢率"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new8"
          align="center"
          label="低估率"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new9"
          align="center"
          label="贝塔值"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new10"
          align="center"
          label="风险"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new11"
          align="center"
          label="风险补偿"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new12"
          align="center"
          label="AI舆情"
          sortable
          width="100%">
        </el-table-column>
      </el-table> 
    </div>

    <div class="info">
        <h3>重点概念</h3>
        <div id="optionbox" ref="optionbox"></div>
        
      </div>


    <div class="concept">
      <h3>概念详情</h3>
      <el-table
      :row-style="tableRowStyle"
        :data="tableData1"
        style="width: 100%"
        :header-cell-style="{background:'#141E31',color:'#000000'}"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          align="center"
          label="重点概念">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="公司数量"
          sortable          
          width="100%">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="流通市值(亿)"
          sortable
          width="120%">
        </el-table-column>
        <el-table-column
          prop="new2"
          align="center"
          label="周线底部"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new3"
          align="center"
          label="周线向上"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new4"
          align="center"
          label="周线顶部"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new5"
          align="center"
          label="周线向下"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new6"
          align="center"
          label="基本面"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new7"
          align="center"
          label="市赢率"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new8"
          align="center"
          label="低估率"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new9"
          align="center"
          label="贝塔值"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new10"
          align="center"
          label="风险"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new11"
          align="center"
          label="风险补偿"
          sortable
          width="100%">
        </el-table-column>
        <el-table-column
          prop="new12"
          align="center"
          label="AI舆情"
          sortable
          width="100%">
        </el-table-column>
      </el-table> 
    </div>
  </div>
</template>

<script>
  // import EchartsJs from './Echarts.js'
  import echarts from 'echarts'

export default {
    data() {
      return{
        tableData2: [
          {date: '材料',name: '2143',address: '454',new2:'0.52%',new3:'0.5%',new4:'0.42%',new5:'0.82%',new6:'8%',new7:'0.52%',new8:'2%',new9:'2%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '物流',name: '2143',address: '45',new2:'40.62%',new3:'0.52%',new4:'4.5%',new5:'40.62%',new6:'40.62%',new7:'0.41%',new8:'3.52%',new9:'0.952%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '公交铁路',name: '4113',address: '78652',new2:'40.62%',new3:'8.5%',new4:'40.62%',new5:'9.2%',new6:'5.2%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '计算机',name: '2143',address: '456',new2:'40.62%',new3:'40.62%',new4:'0.542%',new5:'40.62%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '环保',name: '413',address: '456',new2:'8.42%',new3:'7.22%',new4:'2%',new5:'4%',new6:'42%',new7:'40.62%',new8:'0.752%',new9:'0.52%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '医疗',name: '21413',address: '424',new2:'0.2%',new3:'0.82%',new4:'5%',new5:'40.62%',new6:'0.52%',new7:'0.742%',new8:'40.62%',new9:'0.42%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '蒙牛',name: '2413',address: '4577',new2:'4.2%',new3:'40.62%',new4:'40.62%',new5:'40.62%',new6:'22%',new7:'40.62%',new8:'40.62%',new9:'4.42%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '教育',name: '21413',address: '42',new2:'40.62%',new3:'0.42%',new4:'40.62%',new5:'42%',new6:'4%',new7:'0.842%',new8:'7.52%',new9:'40.62%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '物流',name: '2143',address: '45',new2:'40.62%',new3:'0.52%',new4:'4.5%',new5:'40.62%',new6:'40.62%',new7:'0.41%',new8:'3.52%',new9:'0.952%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '公交铁路',name: '4113',address: '78652',new2:'40.62%',new3:'8.5%',new4:'40.62%',new5:'9.2%',new6:'5.2%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '计算机',name: '2143',address: '456',new2:'40.62%',new3:'40.62%',new4:'0.542%',new5:'40.62%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '环保',name: '413',address: '456',new2:'8.42%',new3:'7.22%',new4:'2%',new5:'4%',new6:'42%',new7:'40.62%',new8:'0.752%',new9:'0.52%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '医疗',name: '21413',address: '424',new2:'0.2%',new3:'0.82%',new4:'5%',new5:'40.62%',new6:'0.52%',new7:'0.742%',new8:'40.62%',new9:'0.42%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '蒙牛',name: '2413',address: '4577',new2:'4.2%',new3:'40.62%',new4:'40.62%',new5:'40.62%',new6:'22%',new7:'40.62%',new8:'40.62%',new9:'4.42%',new10:'B',new11:'B',new12:'3.131'}, 
          {date: '教育',name: '21413',address: '42',new2:'40.62%',new3:'0.42%',new4:'40.62%',new5:'42%',new6:'4%',new7:'0.842%',new8:'7.52%',new9:'40.62%',new10:'B',new11:'B',new12:'3.131'}, 
        
        ],
        tableData1: [
          {date: '材料',name: '2143',address: '454',new2:'0.52%',new3:'0.5%',new4:'0.42%',new5:'0.82%',new6:'8%',new7:'0.52%',new8:'2%',new9:'2%',new10:'4%',new11:'B',new12:'3.131'}, 
          {date: '旅游',name: '2143',address: '45',new2:'40.62%',new3:'0.52%',new4:'4.5%',new5:'40.62%',new6:'40.62%',new7:'0.41%',new8:'3.52%',new9:'0.952%',new10:'2%',new11:'B',new12:'3.131'}, 
          {date: '公交铁路',name: '4113',address: '78652',new2:'40.62%',new3:'8.5%',new4:'40.62%',new5:'9.2%',new6:'5.2%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'0.842%',new11:'B',new12:'3.131'}, 
          {date: '计算机',name: '2143',address: '456',new2:'40.62%',new3:'40.62%',new4:'0.542%',new5:'40.62%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%',new11:'B',new12:'3.131'}, 
          {date: '环保',name: '413',address: '456',new2:'8.42%',new3:'7.22%',new4:'2%',new5:'4%',new6:'42%',new7:'40.62%',new8:'0.752%',new9:'0.52%',new10:'0.042%',new11:'B',new12:'3.131'}, 
          {date: '医疗',name: '21413',address: '424',new2:'0.2%',new3:'0.82%',new4:'5%',new5:'40.62%',new6:'0.52%',new7:'0.742%',new8:'40.62%',new9:'0.42%',new10:'40.62%',new11:'B',new12:'3.131'}, 
          {date: '蒙牛',name: '2413',address: '4577',new2:'4.2%',new3:'40.62%',new4:'40.62%',new5:'40.62%',new6:'22%',new7:'40.62%',new8:'40.62%',new9:'4.42%',new10:'4.2%',new11:'B',new12:'3.131'}, 
          {date: '教育',name: '21413',address: '42',new2:'40.62%',new3:'0.42%',new4:'40.62%',new5:'42%',new6:'4%',new7:'0.842%',new8:'7.52%',new9:'40.62%',new10:'40.62%',new11:'B',new12:'3.131'}, 
          {date: '物流',name: '2143',address: '45',new2:'40.62%',new3:'0.52%',new4:'4.5%',new5:'40.62%',new6:'40.62%',new7:'0.41%',new8:'3.52%',new9:'0.952%',new10:'2%',new11:'B',new12:'3.131'}, 
          {date: '公交铁路',name: '4113',address: '78652',new2:'40.62%',new3:'8.5%',new4:'40.62%',new5:'9.2%',new6:'5.2%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'0.842%',new11:'B',new12:'3.131'}, 
          {date: '计算机',name: '2143',address: '456',new2:'40.62%',new3:'40.62%',new4:'0.542%',new5:'40.62%',new6:'40.62%',new7:'40.62%',new8:'40.62%',new9:'40.62%',new10:'40.62%',new11:'B',new12:'3.131'}, 
          {date: '环保',name: '413',address: '456',new2:'8.42%',new3:'7.22%',new4:'2%',new5:'4%',new6:'42%',new7:'40.62%',new8:'0.752%',new9:'0.52%',new10:'0.042%',new11:'B',new12:'3.131'}, 
          {date: '医疗',name: '21413',address: '424',new2:'0.2%',new3:'0.82%',new4:'5%',new5:'40.62%',new6:'0.52%',new7:'0.742%',new8:'40.62%',new9:'0.42%',new10:'40.62%',new11:'B',new12:'3.131'}, 
          {date: '外卖',name: '2413',address: '4577',new2:'4.2%',new3:'40.62%',new4:'40.62%',new5:'40.62%',new6:'22%',new7:'40.62%',new8:'40.62%',new9:'4.42%',new10:'4.2%',new11:'B',new12:'3.131'}, 
          {date: '教育',name: '21413',address: '42',new2:'40.62%',new3:'0.42%',new4:'40.62%',new5:'42%',new6:'4%',new7:'0.842%',new8:'7.52%',new9:'40.62%',new10:'40.62%',new11:'B',new12:'3.131'}, 
        
        ],
        dataoption : {
            color: ['#09499a'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
              
                {
                    type : 'category',
                    data : ['银行', '保险及其他', '房地产开发', '饮料制造', '建筑装饰', '石油矿业开采', '证券','电力', '电气设备', '计算机应用'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    
                    axisLabel: {                                           
                      interval:0,                                           
                      rotate:40                                        
                    },
                    axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
              },
                }
            ],
            yAxis :[
                {
                    type : 'value',
                    axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
              },
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '30%',
                    data:[10, 52, 200, 334, 390, 330, 220,260, 152, 210],
                    
                    
                }
            ]
        },
        optionbox : {
            color: ['#09499a'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['融资融卷', '沪股通', 'MSCI概念', '证金持股', '深股通', '互联网', '央企国资改革','中字头股票', '一带一路', '超级品牌'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    
                    axisLabel: {                                           
                      interval:0,                                           
                      rotate:40                                        
                    },
                    axisLabel: {
                      textStyle: {
                          color: '#fff',//坐标值得具体的颜色

                      }
                    },
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel: {
                      textStyle: {
                          color: '#fff',//坐标值得具体的颜色

                      }
                    },
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '30%',
                    data:[35000, 30000, 28000, 33400, 20000, 18000, 12000, 11060, 9652, 7510]
                }
            ]
        }
      }
      
    },
    mounted (){
      // this.setEchartOption()
      this.myChart = echarts.init(document.getElementById('dataoption'))
      this.myChart.setOption(this.dataoption)

      // this.optionboxload()
      this.optionboxs = echarts.init(document.getElementById('optionbox'))
      this.optionboxs.setOption(this.optionbox)
    },
    methods:{

      tableRowStyle({ row, rowIndex }) {
          return 'background-color: #141e32'
      },

      setEchartOption(){
        app.count = 11;
        setInterval(function (){
            axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

            var data0 = option.series[0].data;
            var data1 = option.series[1].data;
            data0.shift();
            data0.push(Math.round(Math.random() * 1000));
            data1.shift();
            data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

            option.xAxis[0].data.shift();
            option.xAxis[0].data.push(axisData);
            option.xAxis[1].data.shift();
            option.xAxis[1].data.push(app.count++);

            myChart.setOption(option);
        }, 2100);

      },
      optionboxload(){
        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        for (var i = 0; i < 100; i++) {
            xAxisData.push('第' + i+'天');
            data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
            data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
        }
        
        this.optionbox.xAxis.data = xAxisData;
        this.optionbox.series[0].data = data1;
        this.optionbox.series[1].data = data2;
      }

    },
    
  }
</script>

<style scoped lang='less'>
  .tit{
    text-align: center;
    width: 100%;
  }
  .titleESB{
    line-height: 100px;
    text-align: center;
    font-family: PingFangSC-Medium;
    font-size: 40px;
    color: #FBFBFB;
    letter-spacing: 0;
    text-align: justify;
  }
  .emphasis{
    width: 100%;
  }
  .el-table{
    font-size: 12px!important;
  }
  // .emphasis div{
  //   float: left;
  //   width: 50%;
  // }
  .particulars{
    padding-left: 10px;
    padding-bottom: 30px;
    clear: both;
  }
  .particulars h3{
    display: block;
    padding-bottom: 20px;
    margin-left: -20px;
  }
  .concept{
    padding-left: 10px;
  }
  .concept h3{
    display: block;
    padding-bottom: 20px;
    margin-left: -20px;
  }
  #dataoption{
          width: 90%;
      height: 300px;
      margin: 0 auto;
  }
  #optionbox{
     width: 90%;
      height: 300px;
      margin: 0 auto;
  }
</style>
